<template>
	<!-- #ifdef MP-WEIXIN || H5 -->
	<view class="zindex5 p_fix bottom_0 w100percent safe_buttom dflex jcsa wrap_ntb bg_fff" style="padding-top: 5px; border-top: 1px solid #eee;">
		<view class="dflex jcsa w100percent" v-for="(item, index) in menu" :key="index" @click="clickBottomMenu(index)">
			<view class="cflex jcc aic gap3" v-if="index != 2">
				<view class="cflex p_relative" style="min-height: 20px; height: 20px; max-height: 20px;">
					<view class="dflex zindex5">
						<image :showLoading="true" :src="item.src" class="footer_menu" style="width: 20px;height: 20px"></image>
					</view>
					<text class="menu_dot" v-if="currentMenu == index" :style="'background-color:'+app.theme.mainColor+'; top : ' + item.positionTop + ';right:' + item.positionRight + ';bottom:' + item.positionBottom + ';left:' + item.positionLeft + ';'"></text>
				</view>
				<view class="dflex">
					<text class="f12">{{ item.name}}</text>
				</view>
			</view>
			<view class="dflex" v-else>
				<view class="dflex index_middle_menu jcc aic" :style="'background-color:'+app.theme.mainColor+';'">
					<u-icon name="plus" size="18" :bold="true" :color="app.theme.buttonTextColor"></u-icon>
				</view>
			</view>
		</view>
		<buttomPhoneLogin ref="buttomPhoneLogin" @refreshLoginStatus="refreshLoginStatus"></buttomPhoneLogin>
	</view>
	<!-- #endif -->	
	
	<!-- #ifdef MP-TOUTIAO || MP-KUAISHOU -->
	<view class="zindex5 p_fix bottom_0 w100percent dflex wrap_ntb bg_fff" v-if="app.dyMode == 'trade'" :style="systemInfo.osName == 'ios' ? 'padding: 5px 0 25px 0;border-top: 1px solid #eee;' : 'padding: 5px 0 10px 0;border-top: 1px solid #eee;'">
		<view class="dflex jcsa w100percent" v-for="(item, index) in menu" :key="index" @click="clickBottomMenu(index)">
			<view class="cflex jcc aic gap3">
				<view class="cflex p_relative" style="min-height: 20px; height: 20px; max-height: 20px;">
					<view class="dflex zindex5">
						<u-image :showLoading="true" :src="item.src" width="20px" height="20px" class="footer_menu"></u-image>
					</view>
					<text class="menu_dot" v-if="currentMenu == index" :style="'background-color:'+app.theme.mainColor+'; top : ' + item.positionTop + ';right:' + item.positionRight + ';bottom:' + item.positionBottom + ';left:' + item.positionLeft + ';'"></text>
				</view>
				<view class="dflex">
					<text class="f12">{{ item.name}}</text>
				</view>
			</view>
		</view>
	</view>
	<view class="zindex5 p_fix bottom_0 w100percent dflex wrap_ntb bg_fff" v-else :style="systemInfo.osName == 'ios' ? 'padding: 5px 0 25px 0;border-top: 1px solid #eee;' : 'padding: 5px 0 10px 0;border-top: 1px solid #eee;'">
		<view class="dflex jcsa w100percent" v-for="(item, index) in menu" :key="index" @click="clickBottomMenu(index)">
			<view class="cflex jcc aic gap3" v-if="index != 2">
				<view class="cflex p_relative" style="min-height: 20px; height: 20px; max-height: 20px;">
					<view class="dflex zindex5">
						<u-image :showLoading="true" :src="item.src" width="20px" height="20px" class="footer_menu"></u-image>
					</view>
					<text class="menu_dot" v-if="currentMenu == index" :style="'background-color:'+app.theme.mainColor+'; top : ' + item.positionTop + ';right:' + item.positionRight + ';bottom:' + item.positionBottom + ';left:' + item.positionLeft + ';'"></text>
				</view>
				<view class="dflex">
					<text class="f12">{{ item.name}}</text>
				</view>
			</view>
			<view class="dflex" v-else>
				<view class="dflex index_middle_menu jcc aic" :style="'background-color:'+app.theme.mainColor+';'">
					<u-icon name="plus" size="18" :bold="true" :color="app.theme.buttonTextColor"></u-icon>
				</view>
			</view>
		</view>
	</view>
	<!-- #endif -->	
</template>

<script>
	const global = getApp().globalData;
	
	export default {
		name: "bottomMenu",
		data() {
			return {
				currentMenu: uni.getStorageSync('currentMenu') || 0,
				app :{
					name : global.appName,
					windowInfo : '',
					HeaderWidth : '',
					global : global,
					dyMode : global.dyMode,
					theme : global.theme
				},
				systemInfo: uni.getSystemInfoSync(),
				menu: [],
				isLogin : false
			};
		},
		mounted: function() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route // 获取当前页面路由，也就是最后一个打开的页面路由
			
			this.loadingFooterMenuData()
			// #ifdef MP-WEIXIN
			if (curRoute == "pages/index/index") {
				this.currentMenu = 0
				uni.setStorageSync('currentMenu', 0)
				return
			}
			if (curRoute == "pages/live/live") {
				this.currentMenu = 1
				uni.setStorageSync('currentMenu', 1)
				return
			}
			if (curRoute == "sonPages/my/addNew") {
				this.currentMenu = 2
				uni.setStorageSync('currentMenu', 2)
				return
			}
			// 分类
			// if (curRoute == "pages/type/list") {
			// 	this.currentMenu = 3
			// 	uni.setStorageSync('currentMenu', 3)
			// 	return
			// }
			// 专题
			if (curRoute == "sonPages/topic/topic") {
				this.currentMenu = 3
				uni.setStorageSync('currentMenu', 3)
				return
			}
			if (curRoute == "sonPages/my/my") {
				this.currentMenu = 4
				uni.setStorageSync('currentMenu', 4)
				return
			}
			// #endif
			
			// #ifdef MP-TOUTIAO || MP-KUAISHOU
			if(this.app.dyMode == 'trade') {
				if (curRoute == "pages/index/index") {
					this.currentMenu = 0
					uni.setStorageSync('currentMenu', 0)
					return
				}
				if (curRoute == "pages/live/live") {
					this.currentMenu = 1
					uni.setStorageSync('currentMenu', 1)
					return
				}
				// 分类
				// if (curRoute == "pages/type/list") {
				// 	this.currentMenu = 2
				// 	uni.setStorageSync('currentMenu', 2)
				// 	return
				// }
				// 专题
				if (curRoute == "pages/topic/topic") {
					this.currentMenu = 2
					uni.setStorageSync('currentMenu', 2)
					return
				}
				if (curRoute == "sonPages/my/my") {
					this.currentMenu = 3
					uni.setStorageSync('currentMenu', 3)
					return
				}
			}
			
			if(this.app.dyMode == 'community') {
				if (curRoute == "pages/index/index") {
					this.currentMenu = 0
					uni.setStorageSync('currentMenu', 0)
					return
				}
				if (curRoute == "pages/live/live") {
					this.currentMenu = 1
					uni.setStorageSync('currentMenu', 1)
					return
				}
				if (curRoute == "sonPages/my/addNew") {
					this.currentMenu = 2
					uni.setStorageSync('currentMenu', 2)
					return
				}
				// 分类
				// if (curRoute == "pages/type/list") {
				// 	this.currentMenu = 3
				// 	uni.setStorageSync('currentMenu', 3)
				// 	return
				// }
				// 专题
				if (curRoute == "pages/topic/topic") {
					this.currentMenu = 3
					uni.setStorageSync('currentMenu', 3)
					return
				}
				if (curRoute == "sonPages/my/my") {
					this.currentMenu = 4
					uni.setStorageSync('currentMenu', 4)
					return
				}
			}
			// #endif
			// console.log('routes', routes)
			// console.log('curRoute', curRoute)
			// console.log('currentMenu', this.currentMenu)
			// console.log('routes', curRoute)
			// console.log('currentMenu', this.currentMenu)
		},
		methods: {
			loadingFooterMenuData() {
				// #ifdef MP-WEIXIN || H5
				this.menu = [{
					icon : 'home',
					src : '/static/01.png',
					positionTop : '0',
					positionRight : '',
					positionBottom : '',
					positionLeft : '0',
					name : '首页'
				},{
					icon : 'hourglass-half-fill',
					src : '/static/02.png',
					positionTop : '',
					positionRight : '',
					positionBottom : '0',
					positionLeft : '0',
					name : '动态'
				},{
					icon : 'hourglass-half-fill',
					src : '/static/03_square.png',
					positionTop : '',
					positionRight : '',
					positionBottom : '',
					positionLeft : '',
					name : '发布'
				},{
					icon : 'list',
					src : '/static/04.png',
					positionTop : '',
					positionRight : '0',
					positionBottom : '0',
					positionLeft : '',
					name : '专题'
				},{
					icon : 'account',
					src : '/static/05.png',
					positionTop : '0',
					positionRight : '0',
					positionBottom : '',
					positionLeft : '',
					name : '我的'
				}]
				// #endif
				// #ifdef MP-TOUTIAO || MP-KUAISHOU
				if(this.app.dyMode == 'trade') {
					this.menu = [{
						icon : 'home',
						src : '/static/01.png',
						positionTop : '0',
						positionRight : '',
						positionBottom : '',
						positionLeft : '0',
						name : '首页'
					},{
						icon : 'hourglass-half-fill',
						src : '/static/02.png',
						positionTop : '',
						positionRight : '',
						positionBottom : '0',
						positionLeft : '0',
						name : '动态'
					},{
						icon : 'list',
						src : '/static/04.png',
						positionTop : '',
						positionRight : '0',
						positionBottom : '0',
						positionLeft : '',
						name : '专题'
					},{
						icon : 'account',
						src : '/static/05.png',
						positionTop : '0',
						positionRight : '0',
						positionBottom : '',
						positionLeft : '',
						name : '我的'
					}]
				}
				
				if(this.app.dyMode == 'community') {
					this.menu = [{
						icon : 'home',
						src : '/static/01.png',
						positionTop : '0',
						positionRight : '',
						positionBottom : '',
						positionLeft : '0',
						name : '首页'
					},{
						icon : 'hourglass-half-fill',
						src : '/static/02.png',
						positionTop : '',
						positionRight : '',
						positionBottom : '0',
						positionLeft : '0',
						name : '动态'
					},{
						icon : 'hourglass-half-fill',
						src : '/static/03_square.png',
						name : '发布'
					},{
						icon : 'list',
						src : '/static/04.png',
						positionTop : '',
						positionRight : '0',
						positionBottom : '0',
						positionLeft : '',
						name : '专题'
					},{
						icon : 'account',
						src : '/static/05.png',
						positionTop : '0',
						positionRight : '0',
						positionBottom : '',
						positionLeft : '',
						name : '我的'
					}]
				}
				// #endif
			},
			refreshLoginStatus() {
				this.isLogin = true // 这句话必须要，子组件弹出登录后，刷新父组件isLogin的状态
				// console.log('token', uni.getStorageSync('access_member_info').access_token)
				switch(uni.getStorageSync('lastStep')){
					case 'addNew' : 
						uni.navigateTo({
							url: "/sonPages/my/addNew"
						});
					break;
					
					default:					
					uni.showToast({
						title: '登录成功,请继续操作',
						icon: 'none',
						duration: 2000
					});
					break;
				}
			},
			gotoLogin() {
				this.$refs.buttomPhoneLogin.openLoginPopup()
			},
			clickBottomMenu(e) {
				// console.log('systemInfo',this.systemInfo)
				uni.setStorageSync('currentMenu', e)
				// console.log('bottomMenu0', e);
				if (e === 0) {
					// console.log('bottomMenu0', e);
					uni.redirectTo({
						url: "/pages/index/index"
					});
				}
				if (e === 1) {
					// console.log('bottomMenu0', e);
					uni.redirectTo({
						url: "/pages/live/live"
					});
				}		
				// #ifdef MP-WEIXIN || H5		
				if (e === 2) {		
					getApp()
						.checkLoginStatus()
						.then((isLogin) => {
							// 不是二次赋值，其他地方要靠这个判断是否登录
							this.isLogin = isLogin
							if(isLogin) {
								uni.navigateTo({
									url: "/sonPages/my/addNew"
								});
							} else {
								this.gotoLogin()
								uni.setStorageSync('lastStep','addNew')
							}
						})
						.catch((error) => {
							// register 页面用的跳转
							getApp().goToLogin('addNew')
						});
				}
				if (e === 3) {	
					uni.redirectTo({
						url: "/sonPages/topic/topic"
					});
				}
				if (e === 4) {
					uni.redirectTo({
						url: "/sonPages/my/my"
					});
				}
				// #endif		
				// #ifdef MP-TOUTIAO || MP-KUAISHOU
				if(this.app.dyMode == 'trade') {
					if (e === 2) {	
						uni.redirectTo({
							url: "/sonPages/topic/topic"
						});
					}
					if (e === 3) {
						uni.redirectTo({
							url: "/sonPages/my/my"
						});
					}
				}
				
				if(this.app.dyMode == 'community') {					
					if (e === 2) {	
						uni.redirectTo({
							url: "/sonPages/my/addNew"
						});
					}					
					if (e === 3) {	
						uni.redirectTo({
							url: "/sonPages/topic/topic"
						});
					}
					if (e === 4) {
						uni.redirectTo({
							url: "/sonPages/my/my"
						});
					}
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.bottom_img_mid {
		width: 35px;
		height: 35px;
	}

	.bottom_img {
		width: 23px;
		height: 23px;
	}

	.history_mini {
		right: 15px;
	}

	.history_close {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		right: 0;
	}
	
	.menu_dot {
		width: 10px;
		height: 10px;
		border-radius: 10px;
		display: block;
		position: absolute;
		z-index: 1;
	}
	
	.index_middle_menu {
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border: 2px solid #666;
		border-radius: 5px;
	}
</style>